<template>
	<view class="goods">
		<view class="header">
			<view class="jt"  @tap="go">
				<
			</view>
		</view>
		
		<view class="box"  >
			<view class="img">
				<image :src="list.cover_img" class="pic" mode=""></image>
			</view>
			
			<view class="name">
				<text>{{list.detail_title}}</text>
			</view>
			
			<view class="desc">
				<text>{{list.detail_desc}}</text>
			</view>
			
			<view class="price">
				<text>¥{{list.price_now}}</text>
			</view>
			
			<view class="content">
				<text>{{list.gname}}</text>
			</view>
		</view>
		
		
		
		
		<view class="tan"  v-if="show"  >
			<view class="cuo" @tap="close">
				<text >X</text>
			</view>
		
			
			<view class="fa">
				<image :src="list.cover_img" mode=""></image>
			</view>
			
			<view class="die">
				<text class="person">单人沙发</text><br>
				<text class="num">库存数量:99</text>
			</view>
		
		
		    <view class="fen">
		    	<text>颜色分类</text>
		    </view>
		
			<view class="color" :class="[start==index? 'start':'']" v-for="(item , index) in sku" :key="item.id"  @tap="color(index)">
				<text>{{item.color_text}}</text>
			</view>
			
			<view class="te">
				<text>特色服务</text>	
			</view>
			
			<view class="song">
				<text>送货上门</text>
			</view>
			
			<view class="an">
				<text>上门安装</text>
			</view>
			
			<view class="gou">
				<text>购买数量</text>
				
			</view>
			
			
			<view class="jian" @tap="jian">
				<text>-</text>
			</view>
			
			<view class="count">
				<text>{{num}}</text>
			</view>
			
			<view class="add" @tap="add">
				<text>+</text>
			</view>
			
			
			<view class="yes"  @tap="yes">
				<text>确定</text>
			</view>
			
			
			
		</view>
		
		
		
		
		<view class="bottom">
			
			<view class="car">
				<text @tap="shop">添加到购物车</text>
			</view>
			
			<view class="buy">
				<text @tap="car">立即购买</text>
			</view>
			
		</view>
		
		
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	import { detail } from "../../util/goods/index.js"
	export default {
		data() {
			return {
				list:{},
				show:false,
				sku:[],
			
				num:0,
				boolean:true,
				start:0,
				id:''
			};
		},
		
		onLoad(option){
			const val = JSON.parse(decodeURIComponent(option.id));
			console.log(val)
			
			detail({
				productId:val.id	
			}).then(res=>{
				console.log(res)
				this.list=res.data.data;
				
				try {
				    uni.setStorageSync('key', this.list);
				} catch (e) {
				    // error
				}
				
				this.sku = res.data.data.skuList
				
				
				
			})
		},
		onShow() {
			this.num=1;
			// this.boolean=true;
			
			
			
		},
		methods:{
			go(){
				uni.navigateBack({
					delta:0
				})
			},
			close(){
				this.show=false;
			},
			car(){
				this.show=true
				
				this.boolean=false
			},
			shop(){
				this.show=true
			},
			add(){
				this.num++
			},
			jian(){
				if(this.num>1){
					this.num--
				}else{
					uni.showModal({
						content:"至少购买一件哦",
						duration:2000
					})
				}
				
			},
			color(index){
				this.start=index
				
			this.id=this.sku[index].id
			console.log(this.id)
				
			
				
				
				
				
			},
			
			yes(){
				if(this.boolean){
					uni.showModal({
						content:"添加购物车成功",
						duration:2000
					})
					this.boolean=false
						
				}
				else{
					
					
					uni.navigateTo({
						// url:`./pay/pay?id=${this.id}`
						// url:'./pay/pay?id='+ encodeURIComponent(JSON.stringify(val))
						url:'./pay/pay'
					})	
				}	
			}
		},
	}
</script>

<style lang="scss" scoped>
.goods{
	padding-top: var(--status-bar-height);
}
.goods{
	width: 100%;
	// height: 1000px;
	height: 600px;
	background-color:#f1ece7 ;
}
.header{
	width: 100%;
	height: 60px;
	background-color: #354e44;
	overflow: hidden;
}
.jt{
	font-size: 28px;
	color: #fff;
	margin-top: 10px;
}

.pic{
	width: 100%;
	height: 300px;
}
.name{
	font-size: 16px;
	font-weight: 500;
	margin-top: 30px;
	margin-left:30px ;
}
.desc{
	margin-left:30px ;
	margin-top: 10px;
	color: #8c8c8c;
}
.price{
	margin-top: 10px;
	margin-left: 30px;
	
}
.content{
	margin-left: 30px;
	margin-top: 50px;
}
.bottom{
	width: 100%;
	height: 70px;
	background-color: #fff;
	margin-top: 50px;
	
}
.car{
	width: 112px;
	height: 38px;
	background-color: #e2e2e2;
	margin-left: 98px;
	position: relative;
    top:12px;
	z-index: 0;
	text{
		line-height: 38px;
		text-align: center;
		margin-left: 10px;
		color: #8f8f94;
	}
}

.buy{
	width: 112px;
	height: 38px;
	background-color: #354e44;
	margin-left: 210px;
	margin-top: -25px;
	text{
		line-height: 38px;
		text-align: center;
		color: #fff;
		margin-left: 20px;
	}
}

.tan{
	width: 290px;
	height: 600px;
	background-color: #f5f5f5;
	position: absolute;
	top: 100px;
	left: 45px;
	border-radius: 10px;
	z-index: 999;
}
.cuo{
	width: 30px;
	height: 30px;
	border: 1px solid #333;
	border-radius: 50%;
	margin-top: 20px;
	margin-left: 210px;
	text{
		margin-left: 10px;
		margin-top: 10px;
		line-height: 30px;
		color: #333;
	}
	
}

.color{
	width: 80px;
	height: 30px;
	background-color: #fff;
	border: 1px solid #333;
	border-radius: 10px;
	margin-top: 20px;
	margin-left: 50px;
	position: relative;
	top: -50px;
	text{
		margin-left: 10px;
		line-height: 30px;
	}
}
.start{
	background-color: #354e44;
	color: #fff;
}

.fa{
	width: 100px;
	height: 100px;
	image{
		width: 80px;
		height: 80px;
		margin-top: -120px;
		margin-left: 50px;
	}
}

.person{
	font-size: 18px;
	font-weight: 700;
	margin-left: 130px;
	position: relative;
	top: -60px;
}
.num{
	color: #8c8c8c;
	margin-left: 130px;
	position: relative;
	top: -60px;
}
.fen{
	font-size: 18px;
	font-weight: 600;
	margin-left: 20px;
	position: relative;
	top: -60px;
}
.te{
	font-size: 18px;
	font-weight: 600;
	margin-left: 20px;
}
.song{
	width: 220px;
	height: 30px;
	background-color: #fff;
	margin-left: 30px;
	border-radius: 20px;
	margin-top: 10px;
	line-height: 30px;
	text{
		margin-left:20px
		
	}
}

.an{
	width: 220px;
	height: 30px;
	background-color: #fff;
	margin-left: 30px;
	border-radius: 20px;
	margin-top: 10px;
	line-height: 30px;
	text{
		margin-left:20px
		
	}
}
.gou{
	font-size: 18px;
	font-weight: 600;
	margin-left: 10px;
	margin-top: 10px;
	
	text{
		margin-left:20px
		
		
	}
}
.jian{
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-color: #fff;
	margin-left: 130px;
	line-height: 30px;
	margin-top: 15px;
	
	text{
		font-size: 28px;
		
		margin-left: 8px;
	}
}
.count{
	width: 60px;
	height: 30px;
	border-radius: 15px;
	background-color: #fff;
	margin-left: 180px;
	line-height: 30px;
	margin-top: -30px;
	text{
		font-size: 22px;
		
		margin-left: 20px;
	}
}

.add{
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background-color: #fff;
	margin-left: 250px;
	line-height: 30px;
	margin-top: -30px;
	
	text{
		font-size: 28px;
		
		margin-left: 5px;
	}
}


.yes{
	width: 100px;
	height:40px;
	background-color: #354e44;
	line-height: 40px;
	margin-left: 180px;
	margin-top: 20px;
	border-radius: 20px;
	text{
		color: #fff;
		font-size: 18px;
		margin-left: 30px;
	}
}
</style>
 